<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户档案</title>
    <link rel="stylesheet" href="Bootstrap/css/bootstrap.css">
    <style>

    </style>
</head>

<body>
    <div class="container mt-2">
        <ul class="nav nav-tabs border-bottom" id="myTabs">
            <li class="nav-item">
                <a class="nav-link" href="#userFileDisplay" style="font-size: 0.9rem;">用户档案查询</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="#userFile" style="font-size: 0.9rem;">用户档案维护</a>
            </li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane" id="userFileDisplay">
                <div class="row mx-0 px-0 mt-2">
                    <div class="col-md-5 col-lg-4 col-xl-3 px-0 pe-md-2 mb-2">
                        <div class="input-group">
                            <span class="input-group-text">起始日期</span>
                            <input type="date" name="" id="" class="form-control">
                        </div>
                    </div>
                    <div class="col-md-5 col-lg-4 col-xl-3 px-0 pe-md-2 mb-2">
                        <div class="input-group">
                            <span class="input-group-text">截至日期</span>
                            <input type="date" name="" id="" class="form-control">
                        </div>
                    </div>
                    <div class="col-md-2 col-lg-4 col-xl-3 px-0 mb-2">
                        <a href="#" class="btn btn-primary d-block d-md-inline-block">检索</a>
                    </div>
                </div>
                Lorem ipsum dolor sit amet consectetur adipisicing
                elit. Repellat beatae eius pariatur culpa ipsum saepe rem optio voluptatum. Incidunt quam officiis odio
                minima laboriosam facilis illum itaque ad earum beatae.
            </div>
            <div role="tabpanel" class="tab-pane active" id="userFile">
                <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-4 g-2 accordion-collapse collapse show py-2"
                    id="panelsStayOpen-collapseOne">
                    <div class="col">
                        <div class="input-group input-group-sm">
                            <label for="engineID" class="input-group-text">发动机号</label>
                            <input type="text" class="form-control" id="engineID">
                        </div>
                    </div>
                    <div class="col">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">产品型号</span>
                            <input type="text" class="form-control" id="" readonly value="LR4V5UP-T70X-U3">
                        </div>
                    </div>
                    <div class="col">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">客户姓名</span>
                            <input type="text" class="form-control" id="">
                        </div>
                    </div>
                    <div class="col">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">客户地址</span>
                            <input type="text" class="form-control" id="">
                        </div>
                    </div>
                    <div class="col">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">培训费</span>
                            <input type="number" class="form-control" id="">
                            <span class="input-group-text">强保费</span>
                            <input type="number" class="form-control" id="">
                        </div>
                    </div>
                    <div class="col">
                        <div class="input-group input-group-sm">
                            <label for="co" class="input-group-text">配套厂家</label>
                            <select class="form-select" id="co">
                                <option value="1">大轮拖装配厂</option>
                                <option value="2">中小轮拖装配厂</option>
                                <option value="3">收割机厂</option>
                            </select>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                            <label class="form-check-label" for="flexSwitchCheckDefault">是否培训</label>
                        </div>
                    </div>
                    <div class="col">
                        <div class="input-group input-group-sm">
                            <label for="exampleDataList" class="input-group-text">选择类型</label>
                            <input class="form-control" list="datalistOptions" id="exampleDataList"
                                placeholder="Type to search...">
                            <datalist id="datalistOptions">
                                <option value="San Francisco">
                                <option value="New York">
                                <option value="Seattle">
                                <option value="Los Angeles">
                                <option value="Chicago">
                            </datalist>
                        </div>
                    </div>
                    <div class="col">
                        <div  style="position: relative;" class="d-grid">
                            <button class="btn btn-block btn-outline-secondary btn-sm">
                                <input type="file" class="form-control opacity-0" accept="image/*" multiple style="position: absolute;top:0;left:0">
                                选择图片
                                <svg width="16" height="16" fill="currentColor" class="bi bi-card-image" viewBox="0 0 16 16">
                                    <path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
                                    <path d="M1.5 2A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13zm13 1a.5.5 0 0 1 .5.5v6l-3.775-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12v.54A.505.505 0 0 1 1 12.5v-9a.5.5 0 0 1 .5-.5h13z"/>
                                </svg>
                            </button>
                        </div>
                            <!-- <a class="btn btn-outline-secondary btn-sm me-2">上传图片<i class="bi bi-card-image ms-2"></i></a> -->
                    </div>
                    <div class="col">
                        <div class="input-group input-group-sm">
                            <input type="file" class="form-control btn-defualt" required multiple>
                        </div>
                    </div>
                    <div class="col offset-sm-6 offset-lg-4 offset-xl-3">
                        <div class="d-flex justify-content-end">
                            <a class="btn btn-primary btn-sm me-2">提交客户档案</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    </div>
    <script src="Bootstrap/js/bootstrap.bundle.js"></script>
    <script src="js/jquery.min.js"></script>
    <script>
        $('#myTabs a').click(function (e) {
            e.preventDefault()
            $(this).tab('show')
        })
    </script>
</body>

</html>